<template>
    <div class="red-video">
        <!--S视频-->
        <video
                id="video"
                :class="video_class"
                ref="video"
                :loop="loop"
                :src="red.video"
                :poster="red.cover"
                x5-video-player-type="h5-page"
                webkit-playsinline
                playsinline
                @timeupdate="timeupdate"
                @click="clickVideo"
        >
        </video>
        <!--E视频-->

        <!--S红包-->
        <open-cover
                v-if="under !== 'success'"
                type="video"
                :red_id="red_id"
                :red="red"
                :under="under"
                :video-time="video.time"
                :video_progress="video.progress"
                @changeUnder="changeUnder"
                @click-cover="clickVideo"
                @reset="reset"
        ></open-cover>
        <!--E红包-->

        <!--S开红包成功-->
        <open-success
                :is_show="open_success"
                :red="this.red"
                @close="openSuccessShow = false"
        ></open-success>
        <!--E开红包成功-->

        <!--S暂停-->
        <pause v-if="video.status === 'pause'">
        </pause>
        <!--E暂停-->

        <!--S右下角控制-->
        <control
                :show_reward="under === 'success'"
                :red="red"
                @showReward="openSuccessShow = true"
        ></control>
        <!--E右下角控制-->

        <!--S推广链接-->
        <expand
                v-if="red.link.link"
                :link="red.link.link"
        >
            {{red.link.name}}
        </expand>
        <!--E推广链接-->

    </div>
</template>

<script>
import OpenCover from "../../components/open-cover"
import Control from "../../components/control"
import Expand from "../../components/expand"
import OpenSuccess from "../../components/open-success"
import Pause from "./components/pause/Pause"
export default {
    name: "red-video",
    data() {
      return {
          // 开红包状态 not=未开 opening=开启中 remoting=服务器远程请求中 success=开启结束并且成功 error=开启结束并且开启出错
          under: "not",
          // 成功奖励区域显示状态
          openSuccessShow: true,
          // 视频相关信息
          video: {
              time: 60, // 视频总时长
              progress: 0,  // 视频当前秒数
              width:0, // 视频宽度
              height:0, // 视频高度
              status: 'pause' // 视频状态 play=播放 pause=暂停
          }
      }
    },
    props: {
        // 红包id
        red_id() {
            return this.red.id
        },
        // 红包数据
        red: {
          type: Object
        },
        // 当前切换的红包id
        changeRedId: {
            default: 0
        }
    },
    components: {
        OpenCover,
        Control,
        Expand,
        OpenSuccess,
        Pause
    },
    computed: {
        /**
         * 视频嵌入模式class
         */
        video_class() {
            // 屏幕宽高比率
            let screen_ratio = window.screen.width / window.screen.height
            // 视频宽高比率
            let video_ratio = this.video.width / this.video.height
            if(Math.abs(screen_ratio - video_ratio) > 0.1){
                return 'object-fit-contain'
            } else {
                return 'object-fit-cover'
            }
        },
        /**
         * 视频是否循环播放
         */
        loop() {
            if(this.under === 'success'){
                return true
            } else {
                return false
            }
        },
        // 成功区域是否显示
        open_success() {
            if(this.under === 'success' && this.openSuccessShow){
                return true
            } else {
                return false
            }
        }
    },
    watch: {
        // 切换的红包id
        changeRedId(value) {
            if(value === this.red_id){
                console.log('是')
            } else {
                if(this.under === 'opening' || this.under === 'success'){
                    this.video.status = 'pause'
                    this.$refs.video.pause();
                }
            }
        },
        "$route"(to) {
            if(to.name === 'home-send' || to.name === 'member') {
                this.video.status = 'pause'
                this.$refs.video.pause()
                this.$refs.video.currentTime = 0
            }
        }
    },
    mounted() {
        this.getDuration()
        this.under = this.red.under
        if(this.under === 'success') {
            this.openSuccessShow = false
        }
    },
    methods: {
        /**
         * 获取视频长度
         */
        getDuration(){
            this.$refs.video.ondurationchange = ()=>{
                this.video.time = this.$refs.video.duration
                this.video.width = this.$refs.video.videoWidth
                this.video.height = this.$refs.video.videoHeight
            }
        },
        // 开包状态更改
        changeUnder (under) {
            if(under === 'opening'){
                this.$refs.video.play()
                this.video.status = 'play'
            } else if(under === 'success'){
                this.$refs.video.pause()
                this.video.status = 'pause'
            }
            this.under = under
        },
        /**
         * 视频播放中
         */
        timeupdate(){
            this.video.progress = this.$refs.video.currentTime
        },
        /**
         * 点击
         */
        clickVideo() {
            if(this.video.status === 'pause' && this.under !== 'not'){
                this.video.status = 'play'
                this.$refs.video.play()
            } else {
                this.video.status = 'pause'
                this.$refs.video.pause()
            }
        },
        /**
         * 重置红包
         */
        reset() {
            this.$refs.video.currentTime = 0
            this.$refs.video.play()
        }
    }
}
</script>

<style scoped lang="less" src="./red-video.less"></style>
